<template>
  <div>
    <div class="bread-box but20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">配置任务管理</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click="handleBack">取消</el-button>
      </div>
    </div>
    <c-list :column="4">
      <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
      <c-list-item label="产品配置类型" dict-type-code="PRO_CONFIG_TYPE" :value="formData.proConfigType" />
      <c-list-item label="关联图纸" :to="{name:'ShopDrawingDetail', query:{id: picInfo.id, flag: 'taskDetail'}}" :value="formData.picTaskCode" />
      <c-list-item label="图纸名称" :value="formData.picTaskName" />
      <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" />
      <c-list-item label="门店建设项目号" :value="formData.constCode" />
      <c-list-item label="所属门店编码" :value="formData.shopCode" />
      <c-list-item label="所属门店名称" :value="formData.shopName" />
      <c-list-item label="所属客户编码" :value="formData.clientCode" />
      <c-list-item label="所属客户名称" :value="formData.clientName" />
      <c-list-item label="所属办事处" :value="formData.officeName" />
      <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="formData.shopCityLevel" />
      <c-list-item label="门店市场层级" dict-type-code="MARKET_LEVEL" :value="formData.shopMarketLevel" />
      <c-list-item label="任务生成时间" :value="formData.createTime" />
      <c-list-item label="任务分配时间" :value="formData.distributeTime" />
      <c-list-item label="任务分配人" :value="formData.distributorName" />
      <c-list-item label="任务处理结果" dict-type-code="PRO_CONFIG_HANDLE_RESULT" :value="formData.handleResult" />
      <!-- <c-list-item label="待变更的产品配置单" :value="formData.distributor" /> -->
      <c-list-item label="处理结果说明" :value="formData.handleResulDesc" />
    </c-list>
    <c-section title="任务处理">
      <c-table-box ref="taskTonfigTable" index no-request :selected-arry.sync="tableSelected" :other-filters="otherFilters" :table-config="tableConfig" />
    </c-section>
  </div>
</template>

<script>
import { getTaskDetail } from '@/api/proConfig'
export default {
  name: 'Detail',
  data() {
    return {
      loading: false,
      loadingText: '加载中',
      otherFilters: [],
      formData: {},
      picInfo: {},
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigSheet/page`,
        hideFuncBar: true,
        setting: [
          {
            prop: 'configCode',
            label: '产品配置单号'
          },
          {
            prop: 'source',
            label: '任务来源',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PRODUCT_CONFIG_TASK_SOURCE'
            }
          },
          {
            prop: 'picTaskCode',
            label: '来源图纸任务号'
          },
          {
            prop: 'picTaskName',
            label: '图纸名称'
          },
          {
            prop: 'proConfigType',
            label: '产品配置类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PRO_CONFIG_TYPE'
            }
          },
          {
            prop: 'classDetail',
            label: '产品分类明细'
          },
          {
            prop: 'constCode',
            label: '门店建设项目号'
          },
          {
            prop: 'shopName',
            label: '所属门店'
          },
          {
            prop: 'officeName',
            label: '所属办事处'
          },
          // {
          //   prop: '10',
          //   label: '样品切换批次号'
          // },
          {
            prop: 'proConfiguratorName',
            label: '产品配置人员'
          }
        ]
      }
    }
  },
  created() {
    this.loading = true
    getTaskDetail(this.$route.params.id).then(res => {
      if (res.success) {
        this.formData = res.data
        this.picInfo = res.data.designPictureDtos[0]
        let percode = ''
        if (this.formData.proConfigType === 'FINISHED') {
          percode = 'productconfigfinished'
        } else if (this.formData.proConfigType === 'CUSTOMIZE') {
          percode = 'customization'
        } else if (this.formData.proConfigType === 'MATCHED_FINISHED') {
          percode = 'environment'
        } else if (this.formData.proConfigType === 'SANITARY') {
          percode = 'bathroom'
        } else if (this.formData.proConfigType === 'ACCESSORY' || this.formData.proConfigType === 'RESOURCES') {
          percode = 'decoration'
        }
        const apiHeader = { 'Permission-Percode': percode, 'Permission-App': 'slm' }
        this.$set(this.tableConfig, 'apiHeader', apiHeader)
        this.otherFilters = [{ 'id': 'configTaskCode', 'property': 'configTaskCode', 'operator': '=', 'value': this.formData.configTaskCode }]
        this.$nextTick(() => {
          this.$refs.taskTonfigTable.initTableData()
        })
      }
      this.loading = false
    }).catch(() => {
      this.loading = false
    })
  },
  methods: {
    handleBack() {
      this.$store.dispatch('views/goBack')
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
